<template>
  <div class="home-container">
    <div class="hero-section">
      <div class="title-container">
        <h1 class="main-title animate__animated animate__fadeInDown">
          <span class="title-decoration">链农</span>
        </h1>
        <div class="title-line"></div>
        <h2 class="sub-title animate__animated animate__fadeInUp">区块链助农工程</h2>
        <p class="description animate__animated animate__fadeInUp">利用区块链技术，助力农业现代化发展，打造智慧农业新生态</p>
      </div>
      <div class="blockchain-decoration">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
      </div>
    </div>

    <div class="features-section">
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="feature-card animate__animated animate__fadeInLeft">
            <i class="el-icon-data-line"></i>
            <h3>数据透明</h3>
            <p>区块链技术确保农业数据真实可靠，全程可追溯</p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="feature-card animate__animated animate__fadeInUp">
            <i class="el-icon-connection"></i>
            <h3>智能合约</h3>
            <p>自动化执行农业交易，提高效率降低成本</p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="feature-card animate__animated animate__fadeInRight">
            <i class="el-icon-share"></i>
            <h3>资源共享</h3>
            <p>促进农业资源优化配置，实现互利共赢</p>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="stats-section animate__animated animate__fadeInUp">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="stat-card">
            <div class="stat-number">1000+</div>
            <div class="stat-label">注册农户</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card">
            <div class="stat-number">500+</div>
            <div class="stat-label">交易记录</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card">
            <div class="stat-number">98%</div>
            <div class="stat-label">数据准确率</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card">
            <div class="stat-number">50+</div>
            <div class="stat-label">合作企业</div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="news-section animate__animated animate__fadeInUp">
      <h2 class="section-title">最新动态</h2>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="news-card">
            <div class="news-image">
              <img src="@/assets/tech.jpg" alt="农业科技">
            </div>
            <div class="news-content">
              <h3>区块链技术助力农产品溯源</h3>
              <p>通过区块链技术，实现农产品从种植到销售的全过程可追溯，保障食品安全...</p>
              <el-button type="primary" plain>查看详情</el-button>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="news-card">
            <div class="news-image">
              <img src="@/assets/strawberry.jpg" alt="智慧农业">
            </div>
            <div class="news-content">
              <h3>智慧农业新突破</h3>
              <p>结合物联网技术，打造智能化农业管理系统，提高农业生产效率...</p>
              <el-button type="primary" plain>查看详情</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import 'animate.css/animate.min.css';

export default {
  name: "Home",
  data(){
    return {
      notice:{}
    }
  },
  mounted() {
    this.request.get('/notice/findNewNoticeList').then(res => {
      console.log('公告接口返回数据:', res);
      if (res && res.code === '200' && res.data && res.data.length > 0) {
        this.notice = res.data[0];
        console.log('设置公告数据:', this.notice);
        if (this.notice.content) {
          this.$notify({
            title: '最新公告',
            message: this.notice.content,
            duration: 5000,
            type: 'info'
          });
        } else {
          console.warn('公告内容为空');
        }
      } else {
        console.warn('没有找到公告数据');
      }
    }).catch(err => {
      console.error('获取公告失败:', err);
      this.$message.error('获取公告失败');
    });
  }
}
</script>

<style scoped>
.home-container {
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
  min-height: 100vh;
}

.hero-section {
  text-align: center;
  padding: 80px 0;
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  border-radius: 8px;
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.title-container {
  position: relative;
  z-index: 2;
}

.main-title {
  font-size: 96px;
  color: #2c3e50;
  margin-bottom: 20px;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
  position: relative;
  display: inline-block;
}

.title-decoration {
  color: #4CAF50;
  position: relative;
  display: inline-block;
  transition: all 0.3s ease;
  padding: 0 20px;
}

.title-decoration::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #4CAF50, #8BC34A);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s ease;
}

.title-decoration::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #4CAF50, #8BC34A);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s ease;
}

.title-decoration:hover {
  transform: translateY(-5px);
  text-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
}

.title-decoration:hover::before,
.title-decoration:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.title-line {
  width: 100px;
  height: 4px;
  background: linear-gradient(90deg, #4CAF50, #8BC34A);
  margin: 20px auto;
  border-radius: 2px;
}

.sub-title {
  font-size: 36px;
  color: #34495e;
  margin-bottom: 20px;
  position: relative;
}

.description {
  font-size: 20px;
  color: #2c3e50;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  line-height: 1.8;
}

.blockchain-decoration {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  opacity: 0.1;
}

.block {
  width: 20px;
  height: 20px;
  background: #4CAF50;
  border-radius: 4px;
  animation: float 2s ease-in-out infinite;
}

.block:nth-child(2) {
  animation-delay: 0.2s;
}

.block:nth-child(3) {
  animation-delay: 0.4s;
}

.block:nth-child(4) {
  animation-delay: 0.6s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.features-section {
  margin-top: 40px;
}

.feature-card {
  background: white;
  padding: 30px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(76, 175, 80, 0.1);
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #4CAF50, #8BC34A);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 30px rgba(76, 175, 80, 0.2);
  border-color: rgba(76, 175, 80, 0.3);
}

.feature-card:hover::before {
  transform: scaleX(1);
}

.feature-card i {
  font-size: 48px;
  color: #4CAF50;
  margin-bottom: 20px;
  transition: transform 0.3s ease;
}

.feature-card:hover i {
  transform: scale(1.1);
}

.feature-card h3 {
  font-size: 24px;
  color: #2c3e50;
  margin-bottom: 15px;
}

.feature-card p {
  color: #7f8c8d;
  line-height: 1.6;
  font-size: 16px;
}

.stats-section {
  margin: 60px 0;
  padding: 40px 0;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.stat-card {
  text-align: center;
  padding: 20px;
}

.stat-number {
  font-size: 36px;
  font-weight: bold;
  color: #4CAF50;
  margin-bottom: 10px;
}

.stat-label {
  font-size: 18px;
  color: #666;
}

.news-section {
  margin: 60px 0;
  padding: 20px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.section-title {
  font-size: 32px;
  color: #2c3e50;
  margin-bottom: 30px;
  text-align: center;
}

.news-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  margin-bottom: 20px;
}

.news-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(76, 175, 80, 0.2);
}

.news-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.news-card:hover .news-image img {
  transform: scale(1.05);
}

.news-content {
  padding: 20px;
}

.news-content h3 {
  font-size: 20px;
  color: #2c3e50;
  margin-bottom: 10px;
}

.news-content p {
  color: #666;
  margin-bottom: 15px;
  line-height: 1.6;
}
</style>
